<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品销售统计排行</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<div class="layui-card" style="padding: 10px;height: 600px;">
			<!-- tab选项卡（表格显示 | 图表显示） -->
			<div class="layui-tab">
			  <!-- 选项标题 -->
			  <ul class="layui-tab-title">
				<li class="layui-this">表格显示</li>
				<li id="journaling">图表显示</li>
			  </ul>
			  <!-- 选项内容 -->
			  <div class="layui-tab-content">
				<!-- 表格显示 -->
			    <div class="layui-tab-item layui-show">
					<table class="layui-hide" id="proSaleJournaling" lay-filter="proSaleJournaling"></table>
			    </div>
				<!-- 图表显示 -->
			    <div class="layui-tab-item">
					<div class="layui-card layui-col-md6">
						<!-- <div class="layui-card-header">柱形图</div> -->
						<div class="layui-card-body">
							<div id="pillar" style="width: 600px;height:400px;"></div>
						</div>	
					</div>
					<div class="layui-card layui-col-md6">
						<!-- <div class="layui-card-header">饼图</div> -->
						<div class="layui-card-body">
							<div id="cake" style="width: 660px;height:400px;"></div>
						</div>
					</div>
				</div>
			  </div>
			</div>
		</div>
		
		
		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="../../js/lay-module/echarts/echarts.js"></script>
		<script>
            //声明一个保存商品销售信息的变量
            var proSaleInfo = [];
            //商品销售名称集合
            var proNameData = [];
            //商品销售数量集合
            var proSaleNumData = [];
            //商品销售总额
            var proSaleReportData = [];

            //layui页面操作
			layui.use(['table'],function(){
				var $ = layui.jquery,
					table = layui.table;

				// 表格表头(商品销售信息)
				table.render({
					elem: '#proSaleJournaling',
					url: '/showProSaleReportInfo',
					totalRow: false , //true开启合计行
					cellMinWidth: 100,	//列宽自动分配，最小为100
					cols: [[
						 {field: 'productId', title: '商品编号'},
						 {field: 'salOrdDescProName', title: '商品名称'},
						 {field: 'salOrdDescUnit', title: '单位'},
						 {field: 'salOrdDescComment', title: '产品规格'},
						 {field: 'salOrdDescManufacturer', title: '生产厂商'},
						 {field: 'salOrdDescProNum', title: '销售数量', sort: true, totalRow: true},
						 {field: 'salOrderDescTotal', title: '总销售额', totalRow: true,
							 templet:function(d){
						     	return (d.salOrdDescProPrice * d.salOrdDescProNum).toFixed(2);
							 }
						 }
					 ]],
					skin: 'line',
                    done:function (res) {
					     //获取到查询的商品销售信息
						 proSaleInfo = res.data;
					}
				});

                //触发排序事件（sort(这里是table的id)）
                table.on('sort(proSaleJournaling)', function(obj){
                    //获取到查询的商品销售信息
                    proSaleInfo = table.cache['proSaleJournaling'];
                    //使用冒牌排序（升序 | 降序）
					if ( obj.type == 'asc' ) {
                        for (var i in proSaleInfo ) {
                            for (var j = 0 ; j < proSaleInfo.length - 1 - i ; j++ ) {
                                if ( proSaleInfo[j]['salOrdDescProNum'] > proSaleInfo[j + 1]['salOrdDescProNum'] ) {
                                    var dee = proSaleInfo[j];
                                    proSaleInfo[j] = proSaleInfo[j + 1];
                                    proSaleInfo[j + 1] = dee;
                                }
                            }
                        }
					} else {
                        for (var i in proSaleInfo ) {
                            for (var j = 0 ; j < proSaleInfo.length - 1 - i ; j++ ) {
                                if ( proSaleInfo[j]['salOrdDescProNum'] < proSaleInfo[j + 1]['salOrdDescProNum'] ) {
                                    var dee = proSaleInfo[j];
                                    proSaleInfo[j] = proSaleInfo[j + 1];
                                    proSaleInfo[j + 1] = dee;
                                }
                            }
                        }
					}
                });

                //点击调用绘表方法
                $('#journaling').on('click',function () {
                    renderReport();
                });
			});

			//报表图形
			function renderReport() {
                //循环更改传递的数据格式
                for(var i=0,len=proSaleInfo.length;i<len;i++){
                    proNameData[i] = proSaleInfo[i].salOrdDescProName;
                    proSaleNumData[i] = proSaleInfo[i].salOrdDescProNum;
                    var cakeData = {"value":(proSaleInfo[i].salOrdDescProPrice * proSaleInfo[i].salOrdDescProNum).toFixed(2),"name":proSaleInfo[i].salOrdDescProName}
                    proSaleReportData[i] = cakeData;
                }

                /* 柱形图 */
                // 基于准备好的dom，初始化echarts实例
                var pillarChart = echarts.init(document.getElementById('pillar'));

                // 指定图表的配置项和数据
                var optionPillar = {
                    title: {
                        text: '商品销量'
                    },
                    tooltip: {},
                    xAxis: {
                        data: proNameData,
                        axisLabel:{
                            interval: 0,
							formatter: function (value) {
								//声明一个变量保存显示字符的个数
								var num = 500 / proNameData.length /20;
								//至少显示一个字符
								num = 1>num ? 1:num;
								//限制显示num个字符+...
                                if(value.length > num) {
                                    return value.substring(0, num)+'...';
                                } else {
                                    return value;
                                }
                        	}
                        }
                    },
                    yAxis: {},
                    series: [{
                        //name: '销量',
                        type: 'bar',
                        data: proSaleNumData
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                pillarChart.setOption(optionPillar);


                /* 饼图 */
                // 基于准备好的dom，初始化echarts实例
                var cakeChart = echarts.init(document.getElementById('cake'));

                // 指定图表的配置项和数据
                var optionCake = {
                    title: {
                        text: '总销售额'
                    },
                    series: [
                        {
                            type: 'pie',
                            stillShowZeroSum: false, //数据和为零时，不显示饼图
                            data: proSaleReportData,
							itemStyle: {
                                normal:{
                                    label:{
                                        formatter:'{b}{d}%'//显示名称和所占比例
									}
								}
							}
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                cakeChart.setOption(optionCake);
            }

		</script>
	</body>
</html>
